<template>
  <!--    轮播图      -->
<!--  type="card"-->
  <el-carousel  height="auto"  style="padding: 5px;border-radius: 10px;"   >
    <el-carousel-item v-for="(item) in carouselStore.carouselUrl" :key="item" class="element-height"  >
      <!--        -->
      <h3 text="2xl" justify="center" @click="method.isUrl(item.url) ?null:method.toUrl(item.url) " >
        <el-image :src="item.carouselUrl" v-loading="carouselStore.isLoading" :load="carouselStore.setLoading(false)"  style="height:max-content; width: 100% ;" ref="image" alt="404NotFound">
           <!--   加载失败时       -->
          <template #error>
            <div class="image-slot">
              <el-image :src="defUrl" ></el-image>
            </div>
          </template>
          <template #placeholder>
            <div class="image-loading">
              <el-image :src="defUrl" ></el-image>
            </div>
          </template>
        </el-image>
      </h3>
    </el-carousel-item>
  </el-carousel>
  <!--    轮播图  end    -->
</template>

<script setup>
import {onMounted} from "vue";
import {useCarouselStore} from "@/store/index/carousel"
import {inisHelper} from "@/utils/helper";
const carouselStore =  useCarouselStore();
import defUrl from  "@/assets/img/banner/rand.jpg"

const method ={
  inis: async()=>{
    await carouselStore.getCarouselList();
  },
  isUrl(url){
    return inisHelper.is.empty(url)
  },
  toUrl(url){
    open(url);
  }
}

onMounted(()=>{
  method.inis();
})

</script>

<style scoped>

.element-height{
  height: 320px;
}
@media (max-width: 600px) {
  .element-height{
    height: auto;
  }
}

.image-slot{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #40a9ff;
}
.image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14px;
  color: #999;
}

</style>
